<template>
  <TodoHeader @add-todo="handleAddTodo"/>
  <TodoList>
    <draggable v-model="todos" animation="300" item-key="id">
      <template #item="{ element }">
        <TodoItem v-bind="element" @del="handleDeleteTodo"></TodoItem>
      </template>
    </draggable>
  </TodoList>
  <footer>
    <h3>近期天气</h3>
    <div class="weather-chart">
      <table v-if="weekData.length">
        <thead>
          <tr>
            <th>今天</th>
            <th>明天</th>
            <th>周{{ weekData[2].week }}</th>
            <th>周{{ weekData[3].week }}</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>{{ weekData[0].date.slice(5) }}</td>
            <td>{{ weekData[1].date.slice(5) }}</td>
            <td>{{ weekData[2].date.slice(5)}}</td>
            <td>{{ weekData[3].date.slice(5) }}</td>
          </tr>
          <tr>
            <td>{{ weekData[0].dayweather }}</td>
            <td>{{ weekData[1].dayweather }}</td>
            <td>{{ weekData[2].dayweather }}</td>
            <td>{{ weekData[3].dayweather }}</td>
          </tr>
          <tr>
            <td>风力 {{ weekData[0].daypower }} 级</td>
            <td>风力 {{ weekData[0].daypower }} 级</td>
            <td>风力 {{ weekData[0].daypower }} 级</td>
            <td>风力 {{ weekData[0].daypower }} 级</td>
          </tr>
        </tbody>
      </table>
      <v-chart :option="option"></v-chart>
    </div>
  </footer>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue';

import TodoHeader from '../components/TodoHeader.vue';
import TodoList from '../components/TodoList.vue';
import TodoItem from '../components/TodoItem.vue';

import draggable from 'vuedraggable';

const todos = ref([]);

const handleAddTodo = (todo) => {
  todos.value.push(todo);
};

const handleDeleteTodo = (id) => {
  // 1. 根据id查找对应的todo
  const index = todos.value.findIndex((item) => item.id === id);
  // 2. 删除该todo
  todos.value.splice(index, 1);
};

watch(
  todos,
  () => {
    // 监听todos变化，将数据存储到localStorage中
    localStorage.setItem('todos', JSON.stringify(todos.value));
  },
  { deep: true }
);

// 从localStorage中获取数据
onMounted(() => {
  const localTodos = JSON.parse(localStorage.getItem('todos') || '[]');
  todos.value = localTodos;
});

/* 渲染图表 */
const option = ref({});
const renderChart = (v1, v2) => {
  option.value = {
    tooltip: {
      trigger: 'axis',
    },
    xAxis: {
      type: 'category',
      data: ['今天', '明天', '后天', '大后天'],
      axisLine: {
        lineStyle: {
          color: 'white',
        },
      },
      axisLabel: {
        show: false,
      },
      boundaryGap: false,
    },
    yAxis: {
      show: false,
    },
    series: [
      {
        name: '最高温',
        type: 'line',
        data: v1,
        lineStyle: {
          color: 'orange',
        },
        itemStyle: {
          color: 'orange',
        },
        smooth: true,
        label: {
          show: true, // 显示数据标签
          position: 'top', // 数据标签的位置
          formatter: '白{c}℃', // 格式化数据标签内容，{c} 表示数据点的值
          color: '#fff', // 数据标签的文字颜色
          fontSize: 12, // 数据标签的文字大小
        },
      },
      {
        name: '最低温',
        type: 'line',
        data: v2,
        lineStyle: {
          color: 'skyblue',
        },
        itemStyle: {
          color: 'skyblue',
        },
        smooth: true,
        label: {
          show: true, // 显示数据标签
          position: 'bottom', // 数据标签的位置
          formatter: '晚{c}℃', // 格式化数据标签内容，{c} 表示数据点的值
          color: '#fff', // 数据标签的文字颜色
          fontSize: 12, // 数据标签的文字大小
        },
      },
    ],
  };
};

/* 通过接口获取本地天气数据 */
import {getLocalCityData,getCityWeatherData} from '@/api/index.js';
const localCityData = ref({});
const cityWeatherData = ref({});
const weekData = ref([]);
const dayTemps = ref([]);
const nightTemps = ref([]);

onMounted(async () => {
  localCityData.value = await getLocalCityData();
  console.log(localCityData.value)
  cityWeatherData.value = await getCityWeatherData(localCityData.value.adcode,'all');
  //console.log(cityWeatherData.value)
  weekData.value = cityWeatherData.value.forecasts[0].casts;
  dayTemps.value = cityWeatherData.value.forecasts[0].casts.map((cast) =>
    Number(cast.daytemp)
  );
  nightTemps.value = cityWeatherData.value.forecasts[0].casts.map((cast) =>
    Number(cast.nighttemp)
  );
  //console.log(dayTemps.value);
  renderChart(dayTemps.value, nightTemps.value);
});
</script>

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
footer {
  height: 700px;
  color: white;
  background-color: #00668a;
  h3 {
    width: 100px;
    margin-left: 22rem;
    margin-bottom: 10px;
  }
  .weather-chart {
    max-width: 1216px;
    margin: 0 auto;
    background: #004e71;
    /*border: 2px solid red;*/
    table {
      width: 100%;
      text-align: center;
      line-height: 32px;
    }
    .echarts {
      width: 100%;
      height: 400px;
    }
  }
}
</style>
